<template>
    <div class="SDBoxOne">
        <div class="TImg">
            <img class="Imgs" src="../../public/csdt.jpg" alt="" srcset="" draggable="false">
        </div>
        <div class="SBOX">
            <div class="SBox" @click="openW(appPath+'\\SD')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M.54 3.87.5 3a2 2 0 0 1 2-2h3.672a2 2 0 0 1 1.414.586l.828.828A2 2 0 0 0 9.828 3h3.982a2 2 0 0 1 1.992 2.181l-.637 7A2 2 0 0 1 13.174 14H2.826a2 2 0 0 1-1.991-1.819l-.637-7a1.99 1.99 0 0 1 .342-1.31zM2.19 4a1 1 0 0 0-.996 1.09l.637 7a1 1 0 0 0 .995.91h10.348a1 1 0 0 0 .995-.91l.637-7A1 1 0 0 0 13.81 4H2.19zm4.69-1.707A1 1 0 0 0 6.172 2H2.5a1 1 0 0 0-1 .981l.006.139C1.72 3.042 1.95 3 2.19 3h5.396l-.707-.707z"/>
                </svg>
                <span>根目录</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\models\\Stable-diffusion')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1 8a7 7 0 1 1 2.898 5.673c-.167-.121-.216-.406-.002-.62l1.8-1.8a3.5 3.5 0 0 0 4.572-.328l1.414-1.415a.5.5 0 0 0 0-.707l-.707-.707 1.559-1.563a.5.5 0 1 0-.708-.706l-1.559 1.562-1.414-1.414 1.56-1.562a.5.5 0 1 0-.707-.706l-1.56 1.56-.707-.706a.5.5 0 0 0-.707 0L5.318 5.975a3.5 3.5 0 0 0-.328 4.571l-1.8 1.8c-.58.58-.62 1.6.121 2.137A8 8 0 1 0 0 8a.5.5 0 0 0 1 0Z"/>
                </svg>
                <span>大模型</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\models\\Lora')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M8.186 1.113a.5.5 0 0 0-.372 0L1.846 3.5l2.404.961L10.404 2l-2.218-.887zm3.564 1.426L5.596 5 8 5.961 14.154 3.5l-2.404-.961zm3.25 1.7-6.5 2.6v7.922l6.5-2.6V4.24zM7.5 14.762V6.838L1 4.239v7.923l6.5 2.6zM7.443.184a1.5 1.5 0 0 1 1.114 0l7.129 2.852A.5.5 0 0 1 16 3.5v8.662a1 1 0 0 1-.629.928l-7.185 2.874a.5.5 0 0 1-.372 0L.63 13.09a1 1 0 0 1-.63-.928V3.5a.5.5 0 0 1 .314-.464L7.443.184z"/>
                </svg>
                <span>LORA模型</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\outputs\\txt2img-images')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M7.5 3.75a.75.75 0 1 1-1.5 0 .75.75 0 0 1 1.5 0zm-.861 1.542 1.33.886 1.854-1.855a.25.25 0 0 1 .289-.047L11 4.75V7a.5.5 0 0 1-.5.5h-5A.5.5 0 0 1 5 7v-.5s1.54-1.274 1.639-1.208zM5 9.5a.5.5 0 0 1 .5-.5h5a.5.5 0 0 1 0 1h-5a.5.5 0 0 1-.5-.5zm0 2a.5.5 0 0 1 .5-.5h2a.5.5 0 0 1 0 1h-2a.5.5 0 0 1-.5-.5z"/>
                    <path d="M3 0h10a2 2 0 0 1 2 2v12a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2v-1h1v1a1 1 0 0 0 1 1h10a1 1 0 0 0 1-1V2a1 1 0 0 0-1-1H3a1 1 0 0 0-1 1v1H1V2a2 2 0 0 1 2-2z"/>
                    <path d="M1 5v-.5a.5.5 0 0 1 1 0V5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0V8h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1zm0 3v-.5a.5.5 0 0 1 1 0v.5h.5a.5.5 0 0 1 0 1h-2a.5.5 0 0 1 0-1H1z"/>
                </svg>
                <span>文生图(单)</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\outputs\\img2img-images')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M4.502 9a1.5 1.5 0 1 0 0-3 1.5 1.5 0 0 0 0 3z"/>
                    <path d="M14.002 13a2 2 0 0 1-2 2h-10a2 2 0 0 1-2-2V5A2 2 0 0 1 2 3a2 2 0 0 1 2-2h10a2 2 0 0 1 2 2v8a2 2 0 0 1-1.998 2zM14 2H4a1 1 0 0 0-1 1h9.002a2 2 0 0 1 2 2v7A1 1 0 0 0 15 11V3a1 1 0 0 0-1-1zM2.002 4a1 1 0 0 0-1 1v8l2.646-2.354a.5.5 0 0 1 .63-.062l2.66 1.773 3.71-3.71a.5.5 0 0 1 .577-.094l1.777 1.947V5a1 1 0 0 0-1-1h-10z"/>
                </svg>
                <span>图生图(单)</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\tmp')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M8.235 1.559a.5.5 0 0 0-.47 0l-7.5 4a.5.5 0 0 0 0 .882L3.188 8 .264 9.559a.5.5 0 0 0 0 .882l7.5 4a.5.5 0 0 0 .47 0l7.5-4a.5.5 0 0 0 0-.882L12.813 8l2.922-1.559a.5.5 0 0 0 0-.882l-7.5-4zm3.515 7.008L14.438 10 8 13.433 1.562 10 4.25 8.567l3.515 1.874a.5.5 0 0 0 .47 0l3.515-1.874zM8 9.433 1.562 6 8 2.567 14.438 6 8 9.433z"/>
                </svg>
                <span>临时文件</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\extensions')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M6 0a.5.5 0 0 1 .5.5V3h3V.5a.5.5 0 0 1 1 0V3h1a.5.5 0 0 1 .5.5v3A3.5 3.5 0 0 1 8.5 10c-.002.434-.01.845-.04 1.22-.041.514-.126 1.003-.317 1.424a2.083 2.083 0 0 1-.97 1.028C6.725 13.9 6.169 14 5.5 14c-.998 0-1.61.33-1.974.718A1.922 1.922 0 0 0 3 16H2c0-.616.232-1.367.797-1.968C3.374 13.42 4.261 13 5.5 13c.581 0 .962-.088 1.218-.219.241-.123.4-.3.514-.55.121-.266.193-.621.23-1.09.027-.34.035-.718.037-1.141A3.5 3.5 0 0 1 4 6.5v-3a.5.5 0 0 1 .5-.5h1V.5A.5.5 0 0 1 6 0zM5 4v2.5A2.5 2.5 0 0 0 7.5 9h1A2.5 2.5 0 0 0 11 6.5V4H5z"/>
                </svg>
                <span>扩展文件夹</span>
            </div>
            <div class="SBox" @click="openW(appPath+'\\SD\\models\\VAE')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path fill-rule="evenodd" d="M1 2.5A1.5 1.5 0 0 1 2.5 1h1A1.5 1.5 0 0 1 5 2.5h4.134a1 1 0 1 1 0 1h-2.01c.18.18.34.381.484.605.638.992.892 2.354.892 3.895 0 1.993.257 3.092.713 3.7.356.476.895.721 1.787.784A1.5 1.5 0 0 1 12.5 11h1a1.5 1.5 0 0 1 1.5 1.5v1a1.5 1.5 0 0 1-1.5 1.5h-1a1.5 1.5 0 0 1-1.5-1.5H6.866a1 1 0 1 1 0-1h1.711a2.839 2.839 0 0 1-.165-.2C7.743 11.407 7.5 10.007 7.5 8c0-1.46-.246-2.597-.733-3.355-.39-.605-.952-1-1.767-1.112A1.5 1.5 0 0 1 3.5 5h-1A1.5 1.5 0 0 1 1 3.5v-1zM2.5 2a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1zm10 10a.5.5 0 0 0-.5.5v1a.5.5 0 0 0 .5.5h1a.5.5 0 0 0 .5-.5v-1a.5.5 0 0 0-.5-.5h-1z"/>
                </svg>
                <span>VAE文件夹</span>
            </div>
            <div class="SBox ww" @click="openW(appPath+'\\SD\\models\\VAE')">
                <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill="currentColor" class="svgC" viewBox="0 0 16 16">
                    <path d="M9.5 2.672a.5.5 0 1 0 1 0V.843a.5.5 0 0 0-1 0v1.829Zm4.5.035A.5.5 0 0 0 13.293 2L12 3.293a.5.5 0 1 0 .707.707L14 2.707ZM7.293 4A.5.5 0 1 0 8 3.293L6.707 2A.5.5 0 0 0 6 2.707L7.293 4Zm-.621 2.5a.5.5 0 1 0 0-1H4.843a.5.5 0 1 0 0 1h1.829Zm8.485 0a.5.5 0 1 0 0-1h-1.829a.5.5 0 0 0 0 1h1.829ZM13.293 10A.5.5 0 1 0 14 9.293L12.707 8a.5.5 0 1 0-.707.707L13.293 10ZM9.5 11.157a.5.5 0 0 0 1 0V9.328a.5.5 0 0 0-1 0v1.829Zm1.854-5.097a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L8.646 5.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0l1.293-1.293Zm-3 3a.5.5 0 0 0 0-.706l-.708-.708a.5.5 0 0 0-.707 0L.646 13.94a.5.5 0 0 0 0 .707l.708.708a.5.5 0 0 0 .707 0L8.354 9.06Z"/>
                </svg>
                <span>预处理器文件夹</span>
            </div>
        </div>
        <!-- <div class="tipBox">
            <span>TIP:此软件仅供学习参考</span>
            <span>启动器版本: 0.0.1</span>
            <span>SD-WebUI版本：0.76.0</span>
        </div> -->
        <div class="bottomBox">
            <div class="botTip">
                <span>启动器版本: 0.0.1</span>&nbsp;&nbsp;&nbsp;
                <span>SD-WebUI版本：{{verson}}</span>
            </div>
            <div class="botTip">
                <span>TIP: 仅供学习参考,&nbsp;&nbsp;&nbsp;&nbsp;QQ：1518561299</span>
                
            </div>
            <div class="QD" :class="{QDs: startFlg == true}" @click="openSD"><span></span></div>
        </div>
    </div>
</template>

<script setup>
import { ref,onMounted } from "vue";
const { shell,ipcRenderer } = require('electron')
const { execFile } = require('child_process')
const fs = require('fs')
import { useRouter } from 'vue-router'
import { storeToRefs } from 'pinia'
import useNoiseStatistics from '../stores/index';

//获取pinia
const counterStore = useNoiseStatistics()
const { startFlg } = storeToRefs(counterStore)
const router = useRouter()

const appPath = ref()
//启动状态
const qd = ref(startFlg)
const cmd = ref()

const verson = ref('')

function openW(path) {
    shell.openPath(path)
}

function openSD() {
    if(qd.value == false){
        // console.log('正在启动')
        counterStore.startFlg = true
        router.push('/cmd')
        cmd.value = execFile("webui-user.bat",null,{cwd:appPath.value+'\\SD'},function(error,stdout){
            if(error !==null){
                console.log("exec error"+error)
            }
        })
        counterStore.cmdPid = cmd.value.pid
        cmd.value.stdout.on('data',function(data) {
            // console.log(data)
            counterStore.cmdOUT = data.toString('utf8')
        })
    }else{
        // console.log("杀死")
        // counterStore.startFlg = false
        
        router.push('/cmd')
    }
}

onMounted(()=>{
    //获取安装路径
    ipcRenderer.send("getPath")
    ipcRenderer.on("AppPath", (event,res) => {
        appPath.value = res
        counterStore.SDPath = res
        fs.readFile(counterStore.SDPath+'\\SD\\params.txt', { encoding: "utf-8" }, (err, result) => {
            if (err) {
                console.log(err, "读取文件内容失败");
            } else {
                verson.value = result.substring(result.length-5,result.length)
            }
            
        });
    })

})
</script>

<style scoped>
.tipBox{
    padding: 5px 20px;
    height: 70px;
    display: flex;
    flex-direction: column;
    color: #fff;
}
.botTip{
    padding: 1px 10px;
    max-width: 540px;
    width: 540px;
    font-size: 12px;
    padding-bottom: 0;
}
.QD::after{
    content: '启动';
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
.QDs::after{
    content: '正在运行';
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-content: center;
}
.QD{
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
    display:block;
    color:#fff;
    height: 0;

    width: 100px;

    line-height:60px;

    padding-right:5px;

    border-width: 0px 0px 60px 60px;

    border-style: none solid solid;

    border-color: transparent transparent var(--def-button-color-blue);
    backdrop-filter: blur(var(--def-filler));
    font-size: 22px;
}
.QDs{
    cursor: pointer;
    position: absolute;
    right: 0;
    bottom: 0;
    display:block;
    color:#fff;
    height: 0;

    width: 100px;

    line-height:60px;

    padding-right:5px;

    border-width: 0px 0px 60px 60px;

    border-style: none solid solid;

    border-color: transparent transparent rgb(255, 102, 75);
    font-size: 22px;
}
.bottomBox{
    position: relative;
    height: 40px;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    color: #fff;
}
.svgC{
    width: 20px;
    height: 20px;
    margin-right: 10px;
}
.SBox{
    width: 130px;
    height: 60px;
    background-color: var(--def-box-color);
    backdrop-filter: blur(var(--def-filler));
    margin: 5px;
    display: flex;
    justify-content: center;
    align-content: center;
    flex-wrap: wrap;
    border-radius: 2px;
    cursor: pointer;
}
.ww{
    width: auto;
    padding: 0 10px;
}
.SBOX{
    width: 100%;
    display: flex;
    justify-content: flex-start;
    color: #fff;
    flex-wrap: wrap;
    margin-bottom: 10px;
    padding-left: 15px;
}
.Imgs{
    width: 100%;
}
.TImg{
    overflow: hidden;
    height: 200px;
    margin: 15px 20px;
    border-radius: 5px;
}
</style>